<template>
  <div class="details">
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <a @click="toIndex">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <a @click="goNext">设备列表</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <a>设备详情</a>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <Card class="card">
      <!-- 设备详情 -->
      <div class="title">
        <div class="left-tip"></div>
        <div class="content-title">设备详情</div>
      </div>
      <div class="device">
        <div class="device-flex">
          <div class="device-item">
            <span>设备名称：</span>
            <div class="device-input" :title="deviceDetails.deviceName">
              {{ deviceDetails.deviceName }}
            </div>
          </div>
          <div class="device-item">
            <span>设备型号：</span>
            <div class="device-input">{{ deviceDetails.deviceModel }}</div>
          </div>
          <div class="device-item">
            <span>唯一ID：</span>
            <div class="device-input">{{ deviceDetails.deviceModelId }}</div>
          </div>
        </div>
        <div class="device-flex">
          <div class="device-item">
            <span>所在位置：</span>
            <div class="device-input" :title="deviceDetails.devicePosition">
              {{ deviceDetails.devicePosition }}
            </div>
          </div>
          <div class="device-item">
            <span>所属班级：</span>
            <div class="device-input">
              {{ !deviceDetails.deviceClass ? zanwu : deviceDetails.deviceClass }}
            </div>
          </div>
        </div>
      </div>
      <!-- 管理员信息 -->
      <div class="content-title">设备管理员信息</div>
      <div class="admin-info">
        <div class="admin">
          <div v-for="(item, index) in userList" :key="index" class="name clearfix">
            <div class="admin-title">{{ item.title }}</div>
            <div class="list-content">
              <div v-for="(userItem, userIndex) in item.list" :key="userIndex" class="user">
                <div class="content">
                  <div class="user-name">
                    <span>{{ userItem.name }}</span>
                  </div>
                  <div class="lengths">
                    联系方式：<span>{{ userItem.phone }}</span></div
                  >
                  <div class="lengths"
                    >所在部门：<span>{{ userItem.department }}</span></div
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 当前截图 暂时注释-->
      <!-- <div class="content-title">当前截图</div>
      <div class="screenshot">
        <div class="screenshot-img">
          <img src="@/assets/images/1.jpg" />
        </div>
        <span class="refresh" @click="refresh">刷新</span>
      </div> -->
      <!-- 离线次数 -->
      <div class="content-title">最近7天离线次数</div>
      <Empty v-if="timesList.length === 0" :image="simpleImage" />
      <div v-else class="off-line">
        <div id="offlineTimess" ref="chartss" :style="{ width: '100%', height: '300px' }"></div>
      </div>
      <!-- 发布记录 -->
      <div class="content-title">最近30天发布记录</div>
      <div class="table">
        <a-table :columns="columns" :data-source="tableData" :pagination="false">
          <template #releaseUserName="{ record }">
            <div v-if="record.releaseUserName"> {{ record.releaseUserName }}</div>
            <div v-else>--</div>
          </template>
        </a-table>
      </div>
      <!-- 分页 -->
      <div v-if="tableData.length !== 0" class="pagination">
        <span style="color: #999999; margin-right: 8px">共{{ total }}条</span>
        <a-pagination
          v-model:current="current"
          v-model:pageSize="pageSize"
          :page-size-options="pageSizeOptions"
          :total="total"
          :show-size-changer="true"
          @change="onChange"
        />
      </div>
    </Card>
  </div>
</template>
<script setup>
import { Card, Row, Col, Breadcrumb, Empty } from 'ant-design-vue';
import * as echarts from 'echarts';
import { reactive, ref, onMounted, computed } from 'vue';
import { getEquipmentRecord, getEquipmentReleaseRecord } from '@/api/user';
import { useRoute, useRouter } from 'vue-router';
import { formatDate } from '@/util/formatDate';
import { useStore } from 'vuex';
let zanwu = ref('暂无');
const store = useStore();
// 定义颜色变量
const setStyles = computed(() => {
  return {
    '--primaryColor': store.state.user.primaryColor,
    primaryColor: store.state.user.primaryColor
  };
});
const route = useRoute();
const router = useRouter();
const deviceDetails = ref({});
const pageSizeOptions = ref(['10', '20', '30']); // 每页展示数量
const simpleImage = ref(require('@/assets/images/noData@2x.png'));
const timesList = ref([]);

function toIndex() {
  router.push({
    path: '/'
  });
}
function determine() {
  router.push({
    path: '/service/devices'
  });
}
function goNext() {
  router.push({
    path: '/service/devices'
  });
}

const columns = [
  {
    title: '发布人',
    key: 'releaseUserName',
    dataIndex: 'releaseUserName',
    slots: { customRender: 'releaseUserName' }
  },
  {
    title: '发布名称',
    key: 'infoName',
    dataIndex: 'infoName',
    ellipsis: true
  },
  {
    title: '发布时间',
    key: 'createTime',
    dataIndex: 'createTime'
  }
];
// 分页
const pageSize = ref(10);
const total = ref(0);
const current = ref(1);
let tableData = ref([]);
let userList = ref([]);
// 分页change事件
function onChange(params) {
  current.value = params;
  tableData.value = [];
  getRecord(); // 获取最近30天发布记录
}
onMounted(() => {
  getOfflineTimes(); // 获取最近7天离线次数
  getRecord(); // 获取最近30天发布记录

  window.onresize = function () {
    // 自适应大小
    offlineTimes.value.resize();
  };
});
let chartss = ref(null);
let offlineTimes = ref(null);
function initCharts(xAxisData, seriesData) {
  console.log(22222, chartss.value);
  // 1.实例化对象
  offlineTimes.value = echarts.init(chartss.value);
  // 离线次数
  offlineTimes.value.setOption({
    color: setStyles.value.primaryColor,
    grid: {
      top: '3%',
      left: '0%',
      right: '0%',
      bottom: '3%',
      containLabel: true // 包含刻度文字在内
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: '#666666' // 文本颜色
      }
    },
    yAxis: {
      type: 'value',
      name: '次',
      axisLabel: {
        color: '#999999' // 文字颜色
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#E1DDDD' // 分割线颜色
        }
      }
    },
    series: [
      {
        name: '用户量',
        type: 'line',
        data: seriesData,
        // 折点处显示数据
        label: {
          show: true,
          position: 'top'
        },
        // 设置拐点 小圆点
        symbol: 'circle',
        // 拐点大小
        symbolSize: 8,
        // 填充区域
        areaStyle: {
          // 渐变色
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(255,191,132,0.4)' // 渐变色的起始颜色
              },
              {
                offset: 0.8,
                color: 'rgba(255,191,132,0.1)' // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)'
        }
      }
    ]
  });
  // 防抖
  let timer;
  window.onresize = function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      offlineTimes.value.resize();
    }, 10);
  };
}
function refresh() {
  console.log('刷新图片');
}
// 获取最近7天离线次数
function getOfflineTimes() {
  let beginDate = new Date() - 7 * 24 * 60 * 60 * 1000;
  let date = formatDate(new Date(), 'yyyy-MM-dd');
  const params = {
    id: route.query.id,
    startTimeStr: formatDate(new Date(beginDate), 'yyyy-MM-dd'), // 离线的开始时间
    endTimeStr: date // 离线的结束时间
  };
  getEquipmentRecord(params).then(res => {
    const seriesData = [];
    const xAxisData = [];
    timesList.value = res.data.data.timesList;
    const data = res.data.data;
    data.timesList.forEach(item => {
      seriesData.push(item.count);
      xAxisData.push(item.timeStr);
    });
    deviceDetails.value.deviceName = data.recordVO.deviceName; // 设备名称
    deviceDetails.value.deviceModel = data.recordVO.modelName; // 设备型号
    deviceDetails.value.deviceModelId = data.recordVO.uniqueId; // 唯一ID
    deviceDetails.value.devicePosition = data.recordVO.locationName; // 所在位置
    deviceDetails.value.deviceClass = data.recordVO.clazzFullPath; // 所属班级
    // 设备管理员信息
    let infoList = [];
    const obj = {
      title: '主管理员：',
      list: [
        {
          name:
            data.equipmentVOList.length === 0 ? '暂无' : data.equipmentVOList[0].controllerUserName,
          phone:
            data.equipmentVOList.length === 0
              ? '暂无'
              : data.equipmentVOList[0].controllerUserPhone,
          department:
            data.equipmentVOList.length === 0
              ? '暂无'
              : data.equipmentVOList[0].controllerUserDeptName
        }
      ]
    };
    // infoList.push(obj);
    const userObj = {
      title: '使用人员：',
      list: []
    };
    if (data.equipmentVOList.length !== 0) {
      data.equipmentVOList.forEach(item => {
        userObj.list.push({
          name: item.controllerUserName,
          phone: item.controllerUserPhone,
          department: item.controllerUserDeptName
        });
      });
    } else {
      userObj.list.push({
        name: '暂无',
        phone: '暂无',
        department: '暂无'
      });
    }

    infoList.push(userObj);
    userList.value = infoList;
    // 最近7天离线次数
    setTimeout(() => {
      initCharts(xAxisData, seriesData);
    }, 10);
  });
}
// 获取最近30天发布记录
function getRecord() {
  const params = {
    size: pageSize.value,
    current: current.value,
    data: {
      //   id: 1111
      id: route.query.id
    }
  };
  getEquipmentReleaseRecord(params)
    .then(res => {
      let list = [];
      const data = res.data.data;
      total.value = data.total;
      data.records.forEach(recordItem => {
        list.push({
          id: recordItem.id,
          releaseUserName: recordItem.createUserName, // 发布人
          infoName: recordItem.infoName, // 发布信息名称
          createTime: formatDate(new Date(recordItem.createTime), 'yyyy-MM-dd hh:mm') // 发布时间
        });
      });
      tableData.value = list;
    })
    .catch(err => {
      console.log(err);
    });
}
</script>
<style lang="less" scoped>
/deep/ .micro-ant-pagination-item-active {
  background-color: #d6aa56;
  a {
    color: #ffffff !important;
  }
}
/deep/ .micro-ant-pagination-item a:hover {
  color: #fff;
}
/deep/ .micro-ant-pagination-item:hover {
  background-color: #d6aa56 !important;
}
.details {
  // padding: 15px 120px 24px;
  padding-bottom: 20px;
  background: #f2f2f2;
  min-height: 100%;
  height: auto;
  min-width: 1200px;
  .breadcrumb {
    width: 1200px;
    margin: 0 auto 14px;
  }
  .card {
    width: 1200px;
    margin: 0 auto;
  }

  .content-title {
    font-weight: 500;
    color: #222222;
    font-size: 18px;
  }
  .title {
    display: flex;
    align-items: center;
    line-height: 26px;
    color: #222222;
    .left-tip {
      width: 3px;
      height: 16px;
      background: #d6aa56;
      border-radius: 4px;
      margin-right: 8px;
    }
  }
  .device {
    padding-top: 24px;
    padding-left: 40px;
    .device-flex {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 24px;
      .device-item {
        display: flex;
        align-items: center;
        width: 33.33%;
      }
      .device-input {
        overflow: hidden;
        white-space: nowrap;
        /*文字超出宽度则显示ellipsis省略号*/
        text-overflow: ellipsis;
        width: 273px;
        height: 36px;
        background: #ffffff;
        border: 1px solid #e1dddd;
        border-radius: 4px;
        color: #666666;
        line-height: 36px;
        padding-left: 8px;
      }
    }
  }
  .admin-info {
    padding: 24px 0px 24px 41px;
    width: 800px;
    .spacing {
      margin-top: 24px;
    }
    .admin {
      .admin-title {
        width: 70px;
        float: left;
      }
      .list-content {
        overflow: hidden;
        .user {
          margin-bottom: 24px;
        }
        .content {
          display: flex;
          align-items: center;
          // justify-content: space-between;
          .lengths {
            width: 314px;
          }
          .user-name {
            width: 150px;
          }

          span {
            color: #999999;
          }
        }
      }
    }
    .clearfix:after {
      content: '';
      clear: both;
      display: block;
      height: 0;
      visibility: hidden;
    }
  }
  .screenshot {
    display: flex;
    padding: 24px 40px;
    .screenshot-img {
      width: 210px;
      height: 118px;
      border-radius: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .refresh {
      color: #d6aa56;
      cursor: pointer;
      margin-left: 24px;
      padding-top: 100px;
    }
  }
  .pagination {
    align-items: center;
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
  .table {
    padding: 24px 0 24px 40px;
    width: 100%;
  }
  .off-line {
    max-width: 1446px;
    overflow-x: auto;
    padding: 24px 0 24px 40px;
    .no-listo {
      margin-top: 136px !important;
    }
    canvas {
      width: 100% !important;
      height: 100% !important;
      display: block !important;
    }
    /deep/ canvas {
      width: 100% !important;
      height: 100% !important;
      display: block !important;
    }
  }
}

/deep/ .micro-ant-select {
  width: 102px !important;
}
</style>
